<template>
  <div ref="userSetPage" class="page">
    <div class="page-container">
      <div class="header">
        <div class="title">
          <span class="icon">
            <var-icon name="chevron-left" :size="24" @click="gotoRouter('user')" />
          </span>
          <span class="text">用户信息</span>
          <span class="btn">
            <span class="btn-item">
              <!-- <var-icon name="magnify" /> -->
            </span>
            <span class="btn-item">
              <!-- <var-icon name="plus" @click="addLibrary" /> -->
            </span>
          </span>
        </div>
      </div>
      <div class="center">
        <div class="card">
          <div class="card-center" @click="openChooseFile">
            <div class="label">
              <span>头像</span>
            </div>
            <div class="text">
              <span style="display: inline-block;width:50px;height:50px;border-radius: 5px;overflow: hidden;">
                <img  :src="imgUrl" alt />
              </span>
              <var-icon name="chevron-right" />
            </div>
          </div>
        </div>
        <ImageCropper ref="cropperImageRef" @onClick="onClickHeadImage" style="width:0;height:0;z-index:-9999999">
        </ImageCropper>
        <div class="card">
          <div class="card-center">
            <div class="label">
              <span>昵称</span>
            </div>
            <div class="text">
              <span>{{ userName }}</span>
              <var-icon name="chevron-right" @click="showChangeName({ val: true })" />
            </div>
          </div>
        </div>

        <div class="card">
          <div class="card-center outLogin" @click="outLogin">退出登录</div>
        </div>
      </div>
      <ModifyninameView @showChangeName="showChangeName" v-if="state.changeName" />
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { reactive, computed, ref,onMounted } from "vue";
import { Dialog, Snackbar } from "@varlet/ui";
import ModifyninameView from "@/components/ModifyName.vue";
import store from "@/store";
import uploadImage from "@/util/uploadImg";
import { showToast, showLoadingToast, closeToast } from 'vant';
import ImageCropper from "@/components/ImageCropper.vue";
import { getSystemBarHeight, setPageTopBarHeight } from "@/util/uni-5+app.utils";
export default {
  name: "UserSetView",
  components: {
    ModifyninameView,
    ImageCropper
  },
  setup() {
    const userSetPage=ref()
    const router = useRouter();
    const state = reactive({
      changeName: false
    });
    const files = ref([]);
    const uploadRef = ref();
    const cropperImageRef = ref()
    const showChangeName = obj => {
      console.log("1111", obj);
      state.changeName = obj.val;
    };

    const gotoRouter = name => {
      router.push({ name: name });
    };

    // 退出登录
    const outLogin = () => {
      Dialog({
        title: "提示",
        message: "确定要退出登录吗？",
        onConfirm: () => {
          localStorage.removeItem("token");
          router.push({ name: "login" });
        }
      });
    };

    // 接收上传图片裁剪后的数据
    const onClickHeadImage = (object) => {
      console.log(object)
      const { file, base64 } = object
      handleAfterRead({ url: base64 })
    }

    // 选择文件
    const openChooseFile = () => {
      // uploadRef.value.chooseFile();
      console.log(cropperImageRef.value)
      cropperImageRef.value.chooseFile()
    };
    // 文件读取后 触发上传
    const handleAfterRead = async file => {
      showLoadingToast({
        message: '上传中',
        forbidClick: true,
      });
      console.log("文件读取后要上传", file);
      uploadImage({
        imgBase64: file.url,
        apiurl: "/upload-api/image/headImg",
        params: {
          _id: store.state.userInfo._id,
          userId: store.state.userInfo.userId
        },
        success: (res) => {
          if (res.status === "0000") {
            const { imgUrl } = res.data;
            console.log("解析到url", imgUrl);
            // 更新store.state中的headImg
            const data = {
              token: store.state.token,
              userInfo: {
                ...store.state.userInfo,
                imgUrl: imgUrl
              }
            };
            store.dispatch("login", data);
          } else {
            showToast(res.message);
          }
        },
        failure: () => {
          showToast('网络连接失败');
        },
        complete: () => { }
      });

    };
    const afterRead = file => {
      // 此时可以自行将文件上传至服务器
      console.log("vant上传图片组件：\n", file);
    };
    onMounted(() => {
      setPageTopBarHeight({
        dom: userSetPage.value,
        height: getSystemBarHeight(),
        textColor:"dark"
      })
    })
    return {
      userSetPage,
      handleAfterRead,
      afterRead,
      files,
      uploadRef,
      cropperImageRef,
      state,
      showChangeName,
      gotoRouter,
      outLogin,
      userName: computed(() => store.state.userInfo.userName),
      imgUrl: computed(() => store.state.userInfo.imgUrl),
      openChooseFile,
      onClickHeadImage
    };
  }
};
</script>

<style lang="scss" scoped>
.page {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(243, 242, 247);
  overflow-y: auto;

  .page-container {
    width: 100%;
    height: 100%;
    // background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;

    .header {
      width: 100%;
      height: 40px;
      line-height: 40px;
      // display: flex;
      background-color: rgb(243, 242, 247);

      .title {
        width: 100%;
        text-align: center;
        overflow: hidden;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 5px;
        position: relative;

        .btn {
          display: inline-block;
          display: flex;
          width: 80px;
          align-items: center;

          .btn-item {
            display: inline-block;
            padding: 0 10px;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }

        .icon {
          // float: left;
          width: 80px;
          height: 100%;
          line-height: 100%;
        }

        .text {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 500;
          // width: 100%;
          height: 100%;
          // z-index: -1;
        }
      }

      .searchBar {
        width: 100%;
        height: 30px;
        // background-color: orange;

        padding: 5px;

        .input-box {
          display: inline-block;
          width: 100%;
          height: 30px;
          border-radius: 50px;
          overflow: hidden;
          position: relative;

          .icon {
            width: 30px;
            height: 30px;
            display: inline-block;
            // background-color: orange;
            position: absolute;
          }

          input {
            display: inline-block;
            width: 100%;
            height: 100%;
            background-color: rgb(243, 242, 247);
            border: none;
            outline: none;
            padding-left: 30px;
          }
        }
      }
    }

    .center {
      padding: 5px;
      width: 100%;
      flex: 1;
      overflow-y: auto;

      .card {
        width: 100%;
        padding: 5px;

        .card-center {
          display: flex;
          background-color: white;
          width: 100%;
          height: 100%;
          border-radius: 5px;
          padding: 5px 10px;
          font-size: 14px;
          align-items: center;
          justify-content: space-between;
          color: #474747;

          .label {
            height: 50px;

            span {
              display: flex;
              height: 100%;
              align-items: center;
            }
          }

          .text {
            // width: 50px;
            height: 50px;
            overflow: hidden;
            border-radius: 5px;
            display: flex;
            align-items: center;

            span {
              color: #474747;
            }

            img {
              width: 50px;
              height: 50px;
            }
          }
        }

        .outLogin {
          height: 40px;
          line-height: 40px;
          text-align: center;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
}
</style>